React Native接入腾讯吐个槽

首先介绍一下什么是吐个槽：

吐个槽是腾讯推出的一款轻量、免费的用户意见反馈服务平台，旨在方便地嵌入APP/微信公众号/QQ公众号，为中小企业或团队快速搭建用户反馈通道，帮助产品提升服务水平和效率。

说白了就是一个方便用户意见反馈的工具，优点就是接入方便，可以通过微信及时提醒。这免去了我们开发App时要自己提供一个意见反馈的功能的麻烦。

腾讯吐个槽的官方网站：吐个槽

React Native接入

官网上的文档针对微信公众号，QQ公众号，Android App，iOS App，WEB，小程序的接入过程说明的都非常详细，也非常简单，但唯独没有React Native App的接入文档，所以接入React Native的时候我是抱着试试的态度看是否能够成功，结果成功了。

找到对应产品的url

腾讯吐个槽接入的原理就是通过webview去加载每个产品对应的唯一的url，那么接入的第一步关键就是找到这个url，url的格式：

https://support.qq.com/product/该产品的id

产品的id就是你在后台创建对应的产品之后就可以获取到的

用webview去加载url

在React Native中使用WebView组件去加载对应的产品url，代码如下：

<WebView
    style={{flex: 1}}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    source={{uri: 'https://support.qq.com/product/产品id',
    		body: postData, method: 'POST'}}
    onLoad={() => { this.setState({loading: false}) }}
    onError={() => { Toast.show('出错了，情稍后再试') }}/>

这样就完成了吐个槽的接入，是不是很简单，接下来我们可以配置一些参数来统计用户信息

可选参数的配置

上面的代码中的body参数对应的postData是自定配置的一些可选参数

const postData = 'nickname=' + '昵称' + '&avatar=' + '头像url'
+ '&openid=' + '唯一登录标识' + '&clientVersion=' + '客户端版本号'
+ '&os=' + '系统平台' + '&customInfo=' + '自定义参数'

具体的参数的含义和格式，大家可以去官网查看文档

微信回复通知

按照上面的几步走下来，在React Native上就算是成功接入吐个槽功能了，但是一般用户反馈信息之后，我们回复用户之后，肯定希望用户能第一时间收到回复，而不是需要打开App到反馈列表里面查看，所以我们需要微信回复通知，官方接入微信回复通知里面需要这三步：

• 第一步：设置webView允许拉起微信。
• 第二步：测试微信通知是否成功。
• 第三步：将测试调用链接替换为正式调用链接。

因为第一步只有针对原生iOS和Android的，所以我在React Native中并没有做什么额外的操作，亲测也是可以调起微信收到通知的，所以如果各位在React Native接入的过程中微信回复通知功能没用，那么可以考虑把第一步的url换成：

https://support.qq.com/product/该产品的id?d-wx-push=1

结束

上几张截图：